<template>
  <div class="root">
    <li>{{ name }}</li>
    <li>{{ job }}</li>
    <li>{{ salary }}</li>
    <li>{{ city }}</li>
  </div>
</template>

<script>
import { reactive, toRef, toRefs } from "vue";

export default {
  setup() {
    const state1 = reactive({
      name: "hzj",
      age: 18,
    });

    const state2 = reactive({
      job:'前端开发',
      salary:'22k',
      city:'上海'
    });

    // 也许你想过一个事情，就是只将对象中的某个属性暴露出去，vue3提供了一个toRef函数，可以满足你的需要
    return {
      // 使用起来也很简单，直接toRef(对象,属性名)
      name:toRef(state1,'name'),//这样在模板里直接name就可以了，不需要再state1.name这样麻烦

      // 当然，vue3也提供了一个toRefs的方法，可以把一个对象里的所有属性都暴露出去，这个一般要配合扩展运算符使用，要不然你写成 xxx:toRefs(state2)这样，他妈的这跟不用toRefs有啥区别啊, 模板里不还是得xxx.job这样才能读取
      ...toRefs(state2)

      // 相信到这里你已经明白toRef的意思了，结合字面意思，其实他就是把reactive转换为ref形式，让你用起来更方便
    };
  },
};
</script>

<style scoped>
</style>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>
